<template>
  <el-aside class="menuAside">
    <!-- 此处可添加项目图标等 -->
    <div class="projectIcon">112233</div>
    <el-menu
      :default-active="defaultPath"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      :style="{ height: menuAsideHeight + 'px' }"
      router
    >
      <SubAside
        v-for="item in menuStore.menuList"
        :key="item.path"
        :menu="item"
        :icon="item.icon"
      />
    </el-menu>
  </el-aside>
</template>

<script setup>
import { useRouter } from "vue-router";
import SubAside from '../SubAside/SubAside.vue';
import { useMenuList } from "@/store/modules/menuList";
import { onMounted, ref, watch } from "vue";
import { debounce } from 'Utils/methods'

//隐藏的路由导航栏默认选中待开发
let menuAsideHeight = ref()
let router = useRouter();
let defaultPath = ref(router.currentRoute._value.path)
defineProps({
  isCollapse: true
});

const menuStore = useMenuList();

window.addEventListener('resize',
  debounce(() => {
    menuAsideHeight.value = window.innerHeight - 40;
  }, 500)
)

onMounted(() => {
  menuAsideHeight.value = window.innerHeight - 40;
})
</script>

<style scoped lang="less">
@import url("./index.less");
</style>